<template>
  <!-- 客户信息查询 -->
  <Card>
    <Form :model="form" ref="form" label-position="right" label-width="90" style="display: block;">
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="选择渠道">
            <Select v-model="form.branchType" clearable>
              <Option v-for="item in saleChannelList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="管理机构">
            <Select v-model="form.managecom" placeholder="请选择" clearable>
              <Option v-for="item in organizationList" :key="item.key" :value="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="销售机构">
            <Select v-model="form.agentgroup" clearable
              @on-change="val => getBranchmanager(val, { fileByte: 'groupDistrict' })">
              <Option v-for="item in agentgroupList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <!-- bran -->
          <FormItem label="区部组">
            <Select v-model="form.groupDistrict" clearable>
              <Option v-for="item in groupDistrictList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="客户号">
            <Input v-model="form.customerNo" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="保单号">
            <Input v-model="form.contNo" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="客户姓名">
            <Input v-model="form.customerName" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6" style="display: flex;justify-content: flex-end;">
          <!--  @click="searchTable" -->
          <Button type="primary" :loading="isLoading" icon="md-search"
            style="margin-right:20px;">查询</Button>
          <Button @click="resetForm()" icon="md-refresh">重置</Button>
        </i-col>
      </Row>
    </Form>

    <Table ref="selection" :columns="columns" :data="tableData" style="margin-top:10px">
      <template slot-scope="{ row }" slot="operate">
        <span class="table-button" @click="showDetail(row)">查看详情</span>
      </template>
    </Table>

    <Page :total="10" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.pageIndex" :page-size="ipagination.pageSize"
      transfer></Page>

    <Modal title="相关保单" v-model="relatedPoliciesModal" width="80" footer-hide>
      <Table :columns="relatedPoliciesColumns" :data="relatedPoliciesData" style="margin-top:10px;max-height:700px;">
        <template slot-scope="{ row }" slot="contstateName">
          <div v-if="row.contstateName.indexOf('终止') > -1" class="status-default">{{ row.contstateName }}</div>
          <div v-else-if="row.contstateName.indexOf('有效') > -1" class="status-info">{{ row.contstateName }}</div>
          <div v-else class="status-error">{{ row.contstateName }}</div>
        </template>
      </Table>
    </Modal>
  </Card>
</template>

<script>
import { getSelectListMixin } from "../../util/mixins/getSelectListMixin";
import { loadResourcesMixin } from "../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../util/mixins/tableChangeMixin";
export default {
  name: "clientInfo",
  mixins: [getSelectListMixin, loadResourcesMixin, tableChangeMixin],
  data() {
    return {
      mixinData: {
        tableAxios: "selectcustomer",
        disableMixinCreated: true
      },
      tableData: [
        {
          "customerName": "张丽丽",
          "customerNo": "0000689336",
          "sex": "女",
          "birthday": "1988-10-01",
          "credentialsType": "居民身份证",
          "credentialsNumber": "120221********22",
          "credentialsValidity": "2035-09-14"
        },
        {
          "customerName": "张丽媛",
          "customerNo": "0000689342",
          "sex": "女",
          "birthday": "1986-06-10",
          "credentialsType": "居民身份证",
          "credentialsNumber": "131081********00",
          "credentialsValidity": "2034-12-23"
        },
        {
          "customerName": "张家惠",
          "customerNo": "0000689387",
          "sex": "女",
          "birthday": "1995-03-21",
          "credentialsType": "居民身份证",
          "credentialsNumber": "622102********23",
          "credentialsValidity": "2025-10-22"
        },
        {
          "customerName": "张晓伟",
          "customerNo": "0000689399",
          "sex": "男",
          "birthday": "1986-01-03",
          "credentialsType": "居民身份证",
          "credentialsNumber": "120113********18",
          "credentialsValidity": "2039-09-17"
        },
        {
          "customerName": "张旭",
          "customerNo": "0000689569",
          "sex": "男",
          "birthday": "1988-03-17",
          "credentialsType": "居民身份证",
          "credentialsNumber": "142431********13",
          "credentialsValidity": "2017-08-02"
        },
        {
          "customerName": "张万松",
          "customerNo": "0000690516",
          "sex": "男",
          "birthday": "1980-06-07",
          "credentialsType": "居民身份证",
          "credentialsNumber": "130202********19",
          "credentialsValidity": "2028-10-31"
        },
        {
          "customerName": "张树旺",
          "customerNo": "0000691216",
          "sex": "男",
          "birthday": "1980-08-03",
          "credentialsType": "居民身份证",
          "credentialsNumber": "120224********1X",
          "credentialsValidity": "2035-07-07"
        },
        {
          "customerName": "张佳",
          "customerNo": "0000691804",
          "sex": "女",
          "birthday": "1989-05-04",
          "credentialsType": "居民身份证",
          "credentialsNumber": "120225********88",
          "credentialsValidity": "2025-03-25"
        },
        {
          "customerName": "张龙",
          "customerNo": "0000691913",
          "sex": "男",
          "birthday": "1988-05-19",
          "credentialsType": "居民身份证",
          "credentialsNumber": "120102********16",
          "credentialsValidity": "2015-06-01"
        },
        {
          "customerName": "张振华",
          "customerNo": "0000692266",
          "sex": "男",
          "birthday": "1973-03-28",
          "credentialsType": "居民身份证",
          "credentialsNumber": "120106********17",
          "credentialsValidity": "3000-12-31"
        }
      ],
      relatedPoliciesModal: false,
      relatedPoliciesData: [],
      relatedPoliciesColumns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70,
        },
        {
          title: "管理机构",
          key: "manageComName",
          align: "center",
          minWidth: 150
        },
        {
          title: "渠道",
          key: "branchTypeName",
          align: "center",
          minWidth: 150
        },
        {
          title: "销售机构",
          align: "center",
          key: "agentGroupName",
          minWidth: 150
        },

        {
          title: "保单号",
          key: "contNo",
          align: "center",
          width: 160
        },
        {
          title: "投保人",
          key: "appntName",
          align: "center",
          width: 120
        },
        {
          title: "被保人",
          key: "insuredName",
          align: "center",
          width: 120
        },
        {
          title: "电话",
          key: "phone",
          align: "center",
          width: 150
        },
        {
          title: "工作单位",
          key: "workUnit",
          align: "center",
          minWidth: 120
        },
        {
          title: "职业",
          key: "work",
          align: "center",
          minWidth: 150
        },
        {
          title: "电子邮箱",
          key: "email",
          align: "center",
          minWidth: 150
        },
        {
          title: "主险名称",
          key: "riskName",
          align: "center",
          minWidth: 150
        },
        {
          title: "当前保费",
          key: "prem",
          align: "center",
          width: 120
        },
        {
          title: "保单生效日",
          key: "cvaliDate",
          align: "center",
          width: 120
        },
        {
          title: "业务员",
          key: "agentName",
          align: "center",
          width: 120
        },
        {
          title: "专员",
          key: "reAgentName",
          align: "center",
          width: 120
        },
        {
          title: "保单状态",
          key: "contstateName",
          slot: "contstateName",
          align: "center",
          width: 120
        },
      ],
      agentgroupList: [],
      saleChannelList: [],
      organizationList: [],
      groupDistrictList: [],//区部组
      channelList: [
        { value: "6", label: "续期" },
        { value: "0", label: "个险(新)" },
        { value: "1", label: "个险(旧)" },
        { value: "3", label: "银保" },
        { value: "2", label: "多元" },
        { value: "5", label: "网销" },
      ],
      branList: [],
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70
        },
        {
          title: "客户姓名",
          key: "customerName",
          align: "center",
          width: 100
        },
        {
          title: "客户号",
          key: "customerNo",
          align: "center",
          minWidth: 120
        },

        {
          title: "性别",
          key: "sex",
          align: "center",
          width: 80
        },
        {
          title: "出生日期",
          key: "birthday",
          align: "center",
          minWidth: 120
        },
        // {
        //   title: "电话",
        //   key: "",
        //   align: "center",
        // },
        // {
        //   title: "工作单位",
        //   key: "",
        //   align: "center",
        // },
        // {
        //   title: "职业",
        //   key: "",
        //   align: "center",
        // },
        {
          title: "证件类型",
          key: "credentialsType",
          align: "center",
          width: 120
        },
        {
          title: "证件号码",
          key: "credentialsNumber",
          align: "center",
          width: 150
        },
        {
          title: "证件有效期",
          key: "credentialsValidity",
          align: "center",
          minWidth: 120
        },
        // {
        //   title: "电子邮箱",
        //   key: "",
        //   align: "center",
        // },
        {
          title: "相关保单",
          key: "operate",
          slot: "operate",
          align: "center",
          width: "120",
          fixed: "right",
        },
      ],
    };
  },
  mounted() {
  },
  methods: {

    searchTable() {
      // if (this.form.customerNo || this.form.customerName || this.form.contNo) {
      //   this.loadResources()
      // } else {
      //   this.$Message.info("请录入客户号、保单号或者客户姓名查询")
      // }

    },
    showDetail(row) {
      this.relatedPoliciesData = [{
  "manageComName": "****人寿保险股份有限公司营业总部第一营销区第二服务部",
  "branchTypeName": "个人",
  "agentGroupName": "王俭龙分公司二分王俭龙区刘文鹏组",
  "contNo": "112201600019288",
  "appntName": "张丽丽",
  "insuredName": "张丽丽",
  "phone": "150****9771",
  "workUnit": "****人寿保险公司",
  "work": "金融企业一般内勤、行政管理人员",
  "email": "15022149771@139.com",
  "riskName": "****人寿安康稳盈两全保险（分红型）",
  "prem": "6000.00",
  "cvaliDate": "2016-03-01",
  "agentName": "段世甲",
  "reAgentName": "",
  "contstateName": "承保",
  "payYears": "5年",
  "branchType": "01"
}]
      // this.apiB.selectRelatedPolicy({ customerNo: row.customerNo }).then(res => {
      //   if (res.code == 200 && res.data.list != null) {
      //     this.relatedPoliciesData = res.data.list;
      //   }
      // });
      this.relatedPoliciesModal = true
    },
  },
};
</script>
<style lang="less" scoped>
.status-error {
  border: 0;
  background: #FFEFED;
  color: #FF4722;
}

.status-default {
  border: 0;
  background: #EEEEEE;
  color: #999999;
}

.status-info {
  border: 0;
  background: #EDFFEF;
  color: #14D595;

}
</style>